<template>
    <div>
        <div class="searchTop">
            <div>
                <van-search
                        v-model="str"
                        shape="round"
                        background="#FFFFFF"
                        placeholder="请输入搜索关键词"
                        clear-trigger="false"
                />
                <p @click="submit">搜索</p>
            </div>
        </div>
        <div class="searchBottom">
            <ul v-if="flag">
                <li v-for="(item,index) in mm" :key="index" @click="searchHistory(item)">
                    {{item}}
                </li>
            </ul>
            <ul v-else>
                <router-link tag="li" :to="'/SongDetails?songid='+item.songid" v-for="(item,index) in list"
                             :key="index">{{item.songname}}
                </router-link>

            </ul>
        </div>
    </div>
</template>

<script>
    import {getSearchDetail} from "../api/InterFacelibrary";

    export default {
        name: "Search.vue",
        data() {
            return {
                list: [],
                str: "",
                mm: [],
                flag: "true"
            }
        },
        created() {
            this.mm = JSON.parse(localStorage.getItem("key")) || []
            console.log(this.mm)
        },
        methods: {
            submit() {
                if (this.flag) {
                    this.flag = !this.flag
                }
                //push到一个数组里，然后把这个数组存放到本地缓存里。，在实现数组去重

                this.mm.push(this.str)
                this.mm=this.mm.filter((x, index,self)=>self.indexOf(x)===index)
                console.log(this.mm)
                localStorage.setItem("key", JSON.stringify(this.mm))
                //调接口，获取数据
                getSearchDetail(this.str).then(res => {
                    console.log(res)
                    this.list = res.song
                })
            },
            searchHistory(item){
                // this.str=item
                console.log(item)
                this.str=item
                getSearchDetail(this.str).then(res => {
                    console.log(res)
                    this.list = res.song
                })
            }
        },
        watch: {
            str() {
                this.flag = this.str ? !this.flag : this.flag
            }
        }
    }
</script>

<style scoped lang="less">
    .searchTop {
        padding: 0px 12px;
        text-align: center;

        p {
            padding: 0px 10px;
            border-left: 1px solid #666666;
            float: right;
            position: relative;
            top: -53px;
            right: 25px;
            z-index: 2;
            color: #777;

        }
    }

    .searchBottom {
        padding: 0px 30px;

        li {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #eaeaea;
            font-size: 14px;
        }
    }
</style>